<template>
	<div>
		<el-form :model="queryForm" :inline="true">
			<el-form-item>
				<el-input v-model="queryForm.title" clearable placeholder="标题"/>
			</el-form-item>
		  <el-form-item>
			<el-button type="primary" @click="init()">查询</el-button>
		  </el-form-item>
		</el-form>
	</div>
	
	<div style="margin-top: 1%;">
	<el-table :data="tableData" style="width: 100%;" stripe border highlight-current-row size="large">
	  <el-table-column prop="title" label="帖子标题" />
	  <el-table-column prop="userName" label="发布人" />
	  <el-table-column prop="coverImage" label="封面图" >
	  		<template #default="scope">
	  			<el-image :src="imageBaseUrl + scope.row.coverImage" style="width: 100%;" fit="contain" :preview-src-list="[imageBaseUrl + scope.row.coverImage]" preview-teleported/>
	  		</template>
	  </el-table-column>
	  <el-table-column prop="views" label="浏览次数"/>
	  <el-table-column prop="createTime" label="收藏时间" :formatter="formatterTime"/>
	  <el-table-column label="操作" width="180">
	    <template #default="scope">
	  	<el-button size="small" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
	    </template>
	  </el-table-column>
	</el-table>
	<el-pagination background layout="total, sizes, prev, pager, next" style="margin-top: 2%;"
		:page-sizes="[10, 20, 50]"
		@size-change="init"
		@current-change="init"
		v-model:page-size="queryForm.pageSize"
		v-model:current-page="queryForm.page"
		:total="totalData"
	/>
	</div>

</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue"
import { imageBaseUrl, formatterTime } from "@/global/index.js"
const { proxy } = getCurrentInstance()

const queryForm = reactive({})
const totalData = ref(0)


let tableData = ref([]);
const init = async () => {
	let params = Object.assign({}, queryForm);
	let result = await proxy.axios.post('forumCollect/list', params)
	if (!result) {
	  return;
	}
	tableData.value = result.list;
	totalData.value = result.total;
}
init();

const handleDetail = (idx, rowData) => {
	window.open('detail/' + rowData.forumId)
}

</script>

<style>
</style>